/*
1. 防止内边距和边框影响元素宽度
2. 允许通过添加边框宽度来向元素添加边框
2. [UnoCSS]: 允许通过CSS变量覆盖默认边框颜色
*/
*,
::before,
::after {
  box-sizing: border-box; /* 所有元素使用border-box盒模型，使宽高计算包含padding和border */
  border-width: 0; /* 默认边框宽度为0 */
  border-style: solid; /* 默认边框样式为实线 */
  border-color: var(--un-default-border-color, #e5e7eb); /* 默认边框颜色，支持变量覆盖 */
}

/* HTML元素基础设置 */
html {
  line-height: 1.5; /* 设置一致的行高 */
  -webkit-text-size-adjust: 100%; /* 防止iOS设备旋转后字体大小调整 */
  -moz-tab-size: 4; /* 设置tab字符宽度为4个字符 */
  tab-size: 4; /* 标准属性设置tab字符宽度 */
  font-family: /* 设置默认无衬线字体族，按优先级排列 */
    ui-sans-serif,
    system-ui,
    /* 以下是各系统默认字体 */
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    'Noto Sans',
    sans-serif,
    /* 以下是各系统emoji字体 */
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji';
}

/* body元素设置 */
body {
  margin: 0; /* 清除body默认外边距 */
  line-height: inherit; /* 继承html的行高设置 */
}

/* 水平分割线样式 */
hr {
  height: 0; /* 在Firefox中设置正确高度 */
  color: inherit; /* 修正Firefox中的边框颜色继承问题 */
  border-top-width: 1px; /* 确保水平线默认可见 */
}

/* 缩写元素样式 */
abbr:where([title]) {
  text-decoration: underline dotted; /* 为带title属性的abbr元素添加正确的文本装饰 */
}

/* 标题元素样式重置 */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit; /* 移除默认字体大小 */
  font-weight: inherit; /* 移除默认字体粗细 */
}

/* 链接样式重置 */
a {
  color: inherit; /* 颜色继承父元素 */
  text-decoration: inherit; /* 文本装饰继承父元素 */
}

/* 粗体元素样式 */
b, strong {
  font-weight: bolder; /* 设置正确的字体粗细 */
}

/* 代码等等元素的字体设置 */
code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 设置等宽字体 */
  font-size: 1em; /* 修正所有浏览器中的字体大小 */
}

/* 小号文本 */
small {
  font-size: 80%; /* 设置正确的字体大小 */
}

/* 上标和下标元素 */
sub, sup {
  font-size: 75%; /* 字体大小为普通文本的75% */
  line-height: 0; /* 防止影响行高 */
  position: relative; /* 设置相对定位以便垂直对齐 */
  vertical-align: baseline; /* 基线对齐 */
}
sub { bottom: -0.25em; } /* 下标位置调整 */
sup { top: -0.5em; } /* 上标位置调整 */

/* 表格样式重置 */
table {
  text-indent: 0; /* 移除Chrome和Safari中的文本缩进 */
  border-color: inherit; /* 修正表格边框颜色继承问题 */
  border-collapse: collapse; /* 默认边框合并，移除单元格间间隙 */
}

/* 表单元素样式重置 */
button, input, optgroup, select, textarea {
  font-family: inherit; /* 字体继承 */
  font-feature-settings: inherit; /* 字体特性设置继承 */
  font-variation-settings: inherit; /* 字体变体设置继承 */
  font-size: 100%; /* 设置字体大小为父元素的100% */
  font-weight: inherit; /* 字体粗细继承 */
  line-height: inherit; /* 行高继承 */
  color: inherit; /* 颜色继承 */
  margin: 0; /* 移除外边距 */
  padding: 0; /* 移除内边距 */
}

/* 按钮和选择框样式 */
button, select {
  text-transform: none; /* 移除文本转换 */
}

/* 按钮样式重置 */
button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button; /* 修正iOS和Safari中的样式问题 */
  background-image: none; /* 移除默认按钮样式 */
}

/* Firefox焦点样式 */
:-moz-focusring {
  outline: auto; /* 使用现代Firefox焦点样式 */
}

/* Firefox无效样式 */
:-moz-ui-invalid {
  box-shadow: none; /* 移除Firefox中额外的无效样式 */
}

/* 进度条样式 */
progress {
  vertical-align: baseline; /* 垂直对齐基线 */
}

/* 数字输入框的增减按钮样式 */
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto; /* 修正Safari中光标样式 */
}

/* 搜索框样式 */
[type='search'] {
  -webkit-appearance: textfield; /* 修正Chrome和Safari中的外观 */
  outline-offset: -2px; /* 修正Safari中的轮廓样式 */
}